<template>
    <view class="book-shop-item" @tap="bookDetail" @touchstart="touchstart"
          @touchmove="touchmove">
        <view class="check-btn" @tap.stop="selectBook" v-if="!isDel">
            <image v-if="item.booksIsGoods === 0" class="common-choose"   :src="http+(isCheck?'choose-active':'choose')+'.png'"/>
            <text style="color: #cccccc; font-size: 24rpx;" v-else>缺货</text>
        </view>
        <view class="book-img">
            <image mode="aspectFit" :src="item.booksHead"/>
        </view>
        <view class="book-detail">
            <view class="book-name ellipsis-one">{{item.booksName}}</view>
            <view class="common-applicable-age ellipsis-one">
                <text class="book-class-txt">{{item.sortNameLevel2 || '暂无分类'}}</text>
                <text class="book-age-txt">{{item.booksMinAge}}-{{item.booksMaxAge}}岁</text>
            </view>
            <view class="book-author ellipsis-one">作者：{{item.authorName || '暂无作者'}}</view>
            <view class="book-position">
                <text class="book-position-num">{{item.booksNum}}书位</text>\本
            </view>
        </view>
        <view class="del-shop" v-if="isDel" @tap.stop="deleteHandle">删除</view>
        <view class="common-mark" v-if="item.booksIsGoods !== 0" :style="{right: isDel ? '120rpx' : 0}"/>
    </view>
</template>

<script>
    export default {
        name: "shopItem",
        props: {
            item: {
                defalut: ()=>{},
                type: Object
            },
            index: {
                type: Number,
                defalut: 0
            },
            checked: {
                type: Boolean,
                defalut: false
            },
            delIndex: {
                defalut: false,
                type: Boolean
            }
        },
        watch: {
            checked: {
                handler(newVal){
                    this.isCheck = newVal;
                },
                immediate: true
            },
            delIndex(val){
                if(!val) this.isDel = false
            }
        },
        data(){
            return{
                isCheck: false,
                http: this.$https,
                startX: 0,
                startY: 0,
                isDel: false
            }
        },
        methods: {
            selectBook(){
                this.isCheck = !this.isCheck;
                this.$emit('selectBook', this.item);
            },
            touchstart(e){
                //开始触摸时 重置所有删除
                // this.list.forEach(function (v, i) {
                //     if (v.isTouchMove) v.isTouchMove = false; // 只操作为true的
                // })
                this.startX = e.changedTouches[0].clientX
                this.startY = e.changedTouches[0].clientY
            },
            touchmove(e){
                let startX = this.startX,                // 开始X坐标
                    startY = this.startY,                // 开始Y坐标
                    touchMoveX = e.changedTouches[0].clientX, // 滑动变化坐标
                    touchMoveY = e.changedTouches[0].clientY, // 滑动变化坐标
                    // 获取滑动角度
                    angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
                if(Math.abs(angle) > 30) return
                if(touchMoveX > startX){
                    // 右滑
                    this.isDel = false
                }else{
                    this.isDel = true
                }
                this.$emit('delIndex', this.index)
                // 判断滑动角度
                // that.data.list.forEach(function (v, i) {
                //     v.isTouchMove = false
                //     // 滑动超过30度角 return
                //     if (Math.abs(angle) > 30) return;
                //     if (i == index) {
                //         // 右滑
                //         if (touchMoveX > startX)
                //             v.isTouchMove = false
                //         // 左滑
                //         else
                //             v.isTouchMove = true
                //     }
                // })
            },
            angle (start, end) {
                let  _X = end.X - start.X
                let  _Y = end.Y - start.Y;
                // 返回角度 /Math.atan()返回数字的反正切值
                return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
            },
            bookDetail(){
                this.isDel = false
                uni.navigateTo({
                    url: `../components/gw-book-detail?booksId=${this.item.booksId}`
                })
            },
            deleteHandle(){
                this.$emit('delItem', this.item, this.index)
            }
        }
    }
</script>

<style scoped lang="scss">
    .book-shop-item{
        display: flex;
        background: #fff;
        margin-bottom: 20rpx;
        padding: 40rpx 0;
        position: relative;
        .book-img{
            flex: 0 0 240rpx;
            height:180rpx;
            border-radius:4px;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .check-btn{
            flex: 0 0 120rpx;
            text-align: center;
            align-self: center;
            font-size: 42rpx;
            color: #2BA8FC;
        }
        .book-detail{
            flex-grow: 1;
            margin-left: 20rpx;
            overflow: hidden;
            .common-applicable-age{
                margin: 10rpx 0;
                .book-class-txt,.book-age-txt{
                    padding: 2rpx 10rpx;
                }
            }
            .book-name{
                color:rgba(51,51,51,1);
            }
            .book-author{
                font-size:24rpx;
                color:rgba(153,153,153,1);
            }
            .book-position{
                font-size:24rpx;
                color:rgba(153,153,153,1);
                margin-top: 10rpx;
                &-num{
                    color: #F82432;
                    font-size: 28rpx;
                }
            }
        }
    }
</style>
